import React from 'react';
import { TabBar } from 'antd-mobile';
import { useNavigate, useLocation } from 'react-router-dom';
import {
    AppOutline,
    ContentOutline,
    UserOutline,
    UnorderedListOutline
} from 'antd-mobile-icons';
import '../styles/components/tabBarFooter.scss';

interface TabBarFooterProps {
    activeKey?: string;   // 当前活跃的标签，不传则自动根据路径判断
    fixed?: boolean;      // 是否固定在底部
}

// 标签页配置
const tabs = [
    {
        key: 'home',
        title: '首页',
        icon: <AppOutline />,
        path: '/home'
    },
    {
        key: 'medical',
        title: '医疗',
        icon: <UnorderedListOutline />,
        path: '/hospital-list'
    },
    {
        key: 'appointments',
        title: '预约',
        icon: <ContentOutline />,
        path: '/my-appointments'
    },
    {
        key: 'profile',
        title: '我的',
        icon: <UserOutline />,
        path: '/profile'
    }
];

const TabBarFooter: React.FC<TabBarFooterProps> = ({
    activeKey,
    fixed = true
}) => {
    const navigate = useNavigate();
    const location = useLocation();

    // 自动判断当前路径对应的activeKey
    const getCurrentActiveKey = (): string => {
        const pathname = location.pathname;
        const matchedTab = tabs.find(tab => pathname === tab.path || pathname.startsWith(tab.path));
        return matchedTab?.key || 'home';
    };

    // 最终使用的activeKey
    const finalActiveKey = activeKey || getCurrentActiveKey();

    // 处理标签切换
    const handleChange = (key: string) => {
        const targetTab = tabs.find(tab => tab.key === key);
        if (targetTab) {
            navigate(targetTab.path);
        }
    };

    return (
        <>
            {/* 添加额外的背景遮罩层，确保覆盖内容区域 */}
            <div className="tabbar-background-mask"></div>

            <div className={`tab-bar-footer ${fixed ? 'fixed' : ''}`}>
                <TabBar activeKey={finalActiveKey} onChange={handleChange}>
                    {tabs.map(tab => (
                        <TabBar.Item
                            key={tab.key}
                            icon={tab.icon}
                            title={tab.title}
                        />
                    ))}
                </TabBar>
            </div>
        </>
    );
};

export default TabBarFooter; 